<template>
<div class="container" style="padding-left:20px;">
  <el-card>
  <el-row style="height:60px">
              <el-button
                icon="el-icon-edit"
                size="small"
                type="success"
                style="float:right"
                @click="$router.push('new')"
              >新增试题</el-button>
    </el-row>
<el-form :model="formdata" ref="ruleForm" style="display:flex;width:100%;justify-content:space-around;padding-top:10px; margin-bottom:20px;flex-wrap:wrap;" >
  <el-form-item label="学科" prop="subjectID" class="data-item">
  <el-select v-model="formdata.subjectID" placeholder="请选择">
    <el-option v-for="item in subjects"
      :key="item.label"
      :label="item.label"
      :value="item.label">
    </el-option>
  </el-select>
 </el-form-item>
 <el-form-item label="二级目录" class="data-item">
  <el-select v-model="formdata.catalogID" placeholder="请选择">
    <el-option
      v-for="item in catalogs"
      :key="item.label"
      :label="item.label"
      :value="item.label">
    </el-option>
  </el-select>
 </el-form-item>
 <el-form-item label="标签" class="data-item">
  <el-select v-model="formdata.tags" placeholder="请选择">
    <el-option
      v-for="item in tags"
      :key="item.label"
      :label="item.label"
      :value="item">
    </el-option>
  </el-select>
 </el-form-item>
 <el-form-item label="关键字" class="data-item">
  <el-input  placeholder="根据题干搜索" style="width:200px;"></el-input>
 </el-form-item>
 <el-form-item label="试题类型" class="data-item">
  <el-select v-model="formdata.questionType" placeholder="请选择">
    <el-option
      v-for="item in questionType"
      :key="item.label"
      :label="item.label"
      :value="item.label">
    </el-option>
  </el-select>
 </el-form-item>
 <el-form-item label="难度" class="data-item">
  <el-select v-model="formdata.difficulty " placeholder="请选择">
    <el-option
      v-for="item in difficulty"
      :key="item.label"
      :label="item.label"
      :value="item.label">
    </el-option>
  </el-select>
 </el-form-item>
 <el-form-item label="方向" class="data-item">
  <el-select v-model="formdata.direction" placeholder="请选择">
    <el-option
      v-for="item in direction"
      :key="item"
      :label="item"
      :value="item">
    </el-option>
  </el-select>
 </el-form-item>
 <el-form-item label="录入人" class="data-item">
  <el-select v-model="formdata.creatorID" placeholder="请选择">
    <el-option
      v-for="item in creators"
      :key="item"
      :label="item"
      :value="item">
    </el-option>
  </el-select>
 </el-form-item>
 <el-form-item label="题目备注" class="data-item">
  <el-input  placeholder="请输入内容" style="width:200px;"></el-input>
 </el-form-item>
 <el-form-item label="企业简称" class="data-item">
   <el-input  placeholder="请输入内容" style="width:200px;"></el-input>
 </el-form-item>
 <el-form-item class="data-item" label="城市" style="width:20%; display:flex">
  <el-col :span="12">
    <el-select v-model="formdata.province"  placeholder="请选择" @change="provincesList" >
    <el-option
       v-for="item in province"
      :key="item.name"
      :label="item.name"
      :value="item.name"
   >
    </el-option>
  </el-select>
  </el-col>
   <el-col :span="12">
    <el-select
    v-model="formdata.city"
   placeholder="请选择"
    >
    <el-option
     v-for="item in provinceList"
     :key="item.name"
     :label="item.name"
     :value="item.name">
    </el-option>
  </el-select>
   </el-col>
 </el-form-item>
 <el-form-item class="data-item">

   <el-button type="primary" plain @click="btnClear">清除</el-button>
   <el-button type="primary" @click="btnSearch">搜索</el-button>
  </el-form-item>
</el-form>
<div style="width:100%; height:20px; border:1px solid gray; background-color:rgb(244, 244, 245);margin-bottom:20px;">
    <i class="el-icon-info"></i>
    <span>一共{{page.pages}}条数据</span>
  </div>
<el-table
   :data="list"
    border
    style="width:100%">
    <el-table-column
      fixed
      prop="number"
      label="试题编号"
      width="150">
    </el-table-column>
    <el-table-column
      prop="subjectID"
      label="学科"
      width="120"
      :formatter="famtsubjectID"
      >
    </el-table-column>
    <el-table-column
      prop="catalog"
      label="目录"
      width="120">
    </el-table-column>
    <el-table-column
      prop="questionType"
      label="题型"
      width="120"
      sortable
      >
      <template slot-scope="obj">
              {{
                obj.row.questionType | formType
              }}
    </template>
    </el-table-column>
    <el-table-column
      prop="question"
      label="题干"
      width="300">
    </el-table-column>
    <el-table-column
      prop="addDate"
      label="录入时间"
      width="200">
      <template slot-scope="{ row }">{{ row.addDate | parseTimeByString}}</template>
    </el-table-column>
    <el-table-column
      prop="difficulty"
      label="难度"
      width="120"
      >
      <template slot-scope="obj">
              {{
                obj.row.difficulty | formdifficulty
              }}
    </template>
    </el-table-column>
    <el-table-column
      prop="creator"
      label="录入人"
      width="120">
    </el-table-column>

    <el-table-column
      fixed="right"
      label="操作"
      width="300">
      <template slot-scope="scope">
        <el-button  type="primary" plain size="small" icon="el-icon-view" circle title="预览" @click="preview(scope.row.id)" ></el-button>
        <el-button type="success" icon="el-icon-edit" circle title="修改" plain @click="$router.push('new')"></el-button>
        <el-button type="danger" icon="el-icon-delete" circle title="删除" @click="btnDelete(scope.row.id)" plain></el-button>
        <el-button type="warning"  icon="el-icon-check" circle  title="加入精选" @click="addGood(scope.row.id)" plain></el-button>
        </template>
    </el-table-column>
  </el-table>
  <el-pagination
      :page-sizes="[5, 10, 20, 50]"
      :page-size="page.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      style="float:right"
      :total="page.pages"
      :current-page="page.page"
      @current-change="changePage"
     >
    </el-pagination>
    <el-dialog title="题目预览" :visible.sync="dialogVisible" width="50%">
          <question-dialog :info="previewInfo" :subjectlist='subjects'/>
          <span slot="footer" class="dialog-footer" style="display:flex;justify-content:flex-end;">
            <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
          </span>
  </el-dialog>
  </el-card>
</div>
</template>
<script>
import { list, remove, detail } from '@/api/hmmm/questions'
import { simple } from '@/api/hmmm/subjects'
import { createAPI } from '@/utils/request'
import { simple as tag } from '@/api/hmmm/tags'
import { simple as catalog } from '@/api/hmmm/directorys'
import { provinceslist, cityslist } from '@/api/hmmm/citys'
import { difficulty, direction, questionType } from '@/api/hmmm/constants'
import { parseTimeByString } from '@/filters'
import questionDialog from '@/module-hmmm/components/basicQuestions-preview.vue'
export default {
  components: {
    questionDialog
  },
  data () {
    return {
      list: [],
      difficulty,
      direction,
      questionType,
      parseTimeByString,
      citylist: [],
      arealist: [],
      tags: [],
      subjects: [],
      catalogs: [],
      creators: ['超级管理员', '录入管理员'],
      page: {
        page: 1,
        pagesize: 10,
        pages: 0
      },
      formdata: {
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null
      },
      province: [],
      provincelist: [],
      formsearch: {},
      dialogVisible: false,
      previewInfo: {},
      sendId: ''
    }
  },
  created () {
    this.getList()
    this.simple()
    this.tag()
    this.provinces()
    this.catalog()
    this.getinfo()
  },
  methods: {
    async getList (data) {
      const result = await list(data)
      this.page.pages = result.data.counts
      this.list = result.data.items
    },
    async getinfo () {
      const a = await detail({ id: this.sendId, isNext: true })
      console.log(a)
      this.previewInfo = a.data
    },
    changePage (newpage) {
      this.page.page = newpage
      this.getList({ ...this.page, ...this.formsearch })
    },
    async provinces () {
      this.province = await provinceslist()
    },
    provincesList (e) {
      this.provinceList = cityslist(e)
    },
    async btnDelete (id) {
      try {
        await this.$confirm('此操作将永久删除该题目, 是否继续?')
        await remove({ id })
        this.getList({ ...this.page, ...this.formsearch })
        this.$message.success('删除成功')
      } catch (error) {
        console.log(error)
      }
    },
    async addGood (id) {
      try {
        await this.$confirm('此操作将该题目加入精选, 是否继续?')
        await createAPI(`/questions/choice/${id}/1`, 'post')
        this.$message.success('加入精选成功')
      } catch (error) {
        console.log(error)
      }
    },
    btnClear () {
      this.formdata = {}
      this.$refs.ruleForm.resetFields()
    },
    btnSearch () {
      this.page.page = 1
      for (var key in this.formdata) {
        this.formsearch[key] = this.formdata[key]
      }
      this.getList({ ...this.formsearch, ...this.page })
    },
    async simple () {
      const result = await simple()
      this.subjects = result.data
    },
    async tag () {
      const result = await tag()
      this.tags = result.data
    },
    async catalog () {
      const result = await catalog()
      this.catalogs = result.data
    },
    preview (id) {
      this.sendId = id
      this.dialogVisible = true
      this.getinfo()
    },
    famtsubjectID (row, column, cellValue, index) {
      const b = this.subjects.find(item => {
        if (item.value === cellValue) {
          return true
        }
      })
      return b.label
    }
  },
  filters: {
    formType (value) {
      if (value === '1') {
        return '单选'
      }
      if (value === '2') {
        return '多选'
      } if (value === '3') {
        return '简答'
      }
    },
    formdifficulty (value) {
      if (value === '1') {
        return '简单'
      }
      if (value === '2') {
        return '一般'
      }
      if (value === '3') {
        return '困难'
      }
    }
  }

}
</script>

<style scoped>
.data-item {
 flex:1;
 width:25%;
 margin-top:30px;
 min-width: 25%;
 max-width: 25%;
 display:flex;
 justify-content:center;
 align-items: center;
 }

</style>
